<template>
  <div class="LatestMusic">
    <div class="LatestMusic_title">
      <span :class="{active:tag == 0 ? true : false}" @click="tag=0 ">全部</span>
      <span :class="{active:tag == 7 ? true : false}" @click="tag=7 ">华语</span>
      <span :class="{active:tag == 96 ? true : false}" @click="tag=96">欧美</span>
      <span :class="{active:tag == 8 ? true : false}" @click="tag=8 ">日本</span>
      <span :class="{active:tag == 16 ? true : false}" @click="tag=16">韩国</span>
    </div>
    <div class="LatestMusic_body">
      <span style="margin-left:100px;">音乐标题</span>
      <span>歌手</span>
      <span>专辑</span>
      <span>时长</span>
    </div>
    <ul>
      <li class="LatestMusic_list" v-for="(item,index) in lists" :key="index">
        <span>{{index+1}}</span>
        <div class="LatestMusic_list_icon" @click="songs(item.id)">
          <span class="el-icon-video-play"></span>
          <img :src="item.album.picUrl" width="60px" />
        </div>
        <div class="LatestMusic_list_title">
          <p>
            {{item.name}}
            <span class="el-icon-video-camera-solid"></span>
          </p>
          <p>{{item.album.company}}</p>
        </div>
        <div class="LatestMusic_list_name">{{item.artists[0].name}}</div>
        <div class="LatestMusic_list_zj">{{item.album.name}}</div>
        <div class="LatestMusic_list_time">{{item.duration}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: null,
      tag: 0
    };
  },
  watch: {
    tag() {
      this.LatestMusicAxios();
    }
  },
  methods: {
    // 获取最新音乐
    LatestMusicAxios() {
      this.$http({
        method: "get",
        url: "/top/song",
        params: {
          type: this.tag
        }
      }).then(res => {
        this.lists = res.data.data;
        // 遍历这个数据
        for (let i = 0; i < this.lists.length; i++) {
          let c = this.lists[i].duration;
          // 秒 c /1000
          // 分 c/1000/60
          let d = parseInt(c / 1000 / 60);
          let f = parseInt((c / 1000) % 60);
          d = d < 10 ? "0" + d : d;
          f = f < 10 ? "0" + f : f;
          this.lists[i].duration = `${d}分${f}秒`;
        }
      });
    },
    // 播放歌曲
    songs(id) {
      this.$http({
        method: "get",
        url: "/song/url",
        params: {
          id
        }
      }).then(res => {
        this.$parent.$parent.musicUrl = res.data.data[0].url;
      });
    }
  },
  created() {
    // 获取最新音乐
    this.LatestMusicAxios();
  }
};
</script>
<style lang="less" scoped>
.LatestMusic {
  width: 1000px;
  margin: 0 auto;
  .LatestMusic_title {
    text-align: right;
    height: 30px;
    margin-top: 20px;
    span {
      font-size: 16px;
      margin-right: 20px;
      cursor: pointer;
      line-height: 30px;
    }
  }
  .LatestMusic_body {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    height: 40px;
    span {
      font-size: 15px;
      line-height: 40px;
    }
  }
  .LatestMusic_list {
    display: flex;
    height: 60px;
    align-items: center;
    border-radius: 15px;
    > span {
      display: block;
      width: 50px;
      margin-left: 25px;
      font-size: 15px;
    }
    .LatestMusic_list_icon {
      width: 60px;
      height: 60px;
      display: flex;
      position: relative;
      justify-content: center;
      border-radius: 10px;
      margin-right: 60px;
      > span {
        position: absolute;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background-color: rgba(126, 119, 120, 0.3);
        color: #fff;
        font-size: 14px;
        display: none;
        border-radius: 10px;
      }
      img {
        display: block;
        border-radius: 10px;
      }
    }
    .LatestMusic_list_icon:hover span {
      display: block;
    }
    .LatestMusic_list_title {
      height: 60px;
      width: 130px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p:nth-child(1) {
        font-size: 13px;
        span {
          font-size: 13px;
          color: rgb(199, 13, 13);
        }
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p:nth-child(2) {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      margin-right: 100px;
    }
    .LatestMusic_list_name {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin-right: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .LatestMusic_list_zj {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin-right: 155px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .LatestMusic_list_time {
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
    }
  }
  .LatestMusic_list:hover {
    background-color: rgba(97, 85, 87, 0.2);
  }
}
li {
  list-style-type: none;
  margin-top: 10px;
}
.active {
  color: red;
}
</style>